---
import '../styles/theme.css';
import '../styles/index.css';
import '../styles/docs.css';
---

<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />

<!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />

<link rel="sitemap" href="/sitemap.xml" />

<!-- Preload Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap"
  rel="stylesheet"
/>

<!-- Because the last website used hash urls and client nav -->
<script src="/legacy-hash.js" is:inline></script>

<!-- Scrollable a11y code helper -->
<script src="/make-scrollable-code-focusable.js" is:inline></script>

<!-- This is intentionally inlined to avoid FOUC -->
<script is:inline>
  const root = document.documentElement;
  const theme = localStorage.getItem('theme');
  if (
    theme === 'dark' ||
    (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
  ) {
    root.classList.add('theme-dark');
  } else {
    root.classList.remove('theme-dark');
  }
</script>
